<template>
  <div id="test_app">
    <!--echarts的容器-->
    <div
      id="chartLineBox1"
      style="width: 340px; height: 420px; margin-left: -40px; margin-top: -50px"
    ></div>
  </div>
</template>
   
  <script>
import * as echarts from "echarts";
export default {
  data(){
    return{
      list: [],
    }
  },
  mounted() {
      this.$axios({
      url: "api/inhabitant/findInhabitantByResidentLabelCount",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.list = res.data.data;
      this.init()
    });
  },
  methods: {
    init() {
      this.chartLine = echarts.init(document.getElementById("chartLineBox1"));

      // 指定图表的配置项和数据
      var option1 = {
        xAxis: {
          type: "value",
          show: false,
          min: 0,
          max: 50,
          interval: 100,

          axisLine: {
            show: false, //不显示坐标轴线
          },
          axisTick: {
            show: false,
          },
          data: this.dataY, //y轴数据
        },
        yAxis: [
          {
            type: "category",
            axisLabel: { show: false },
            show: false,
            data: [
              "高血压",
              "冠心病",
              "高血糖",
              "高血脂",
              "慢性护理",
              "多动症",
            ],
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "#999999",
                margin: 15,
              },
              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            },
          },
          /* {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
                textStyle: {
                    color: '#333333',
                    fontSize: '14'
                },
                // 调整右侧数值文字的3个属性，缺一不可
                padding: [0, 0, 35, -130],
                formatter: '{value}%'
            },
            data:getmyd
        } */
        ],
        series: [
          {
            name: "Cost",
            type: "bar",
            label: {
              show: true,
              formatter: "{b}",
              position: "left",
              align: "left",
              offset: [5, -20],
              color: "#999999",
            },
            barWidth: 7,
            itemStyle: {
              normal: {
                color: "#2984f8",
                // 设置柱子圆角
                barBorderRadius: [100, 100, 100, 100],
              },
            },
            /* markPoint: {
            symbol: 'pin', // 标记类型
            symbolSize: 10, // 图形大小
            itemStyle: {
              normal: {
                borderColor: '#999999',
                label: {
                  show: true,
                  fontSize: 14
                }
              }
            }
          }, */

            emphasis: {
              focus: "series",
            },
            data: this.list,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option1);
    },
  },
};
</script>
   
  <style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>